@import '../../style/common.less';

// 使用Grid布局进行可视化布局
.metadata-wrap {
    height: calc(90vh);
    width: 100%;
    display: grid;
    padding: 10px;
    grid-template-columns: 25% 25% 50%;
    grid-template-rows: 35% 13% 55%;
    grid-template-areas: "chart1 chart2 chart3"
                         "list list chart3"
                         "list list chart4";
}

.monitor-chart1 {
    grid-area: chart1;
    background-color: @colorM;
    border-radius: 8px;
    margin: 10px;
}

.monitor-chart2 {
    grid-area: chart2;
    background-color: @colorM;
    border-radius: 8px;
    margin: 10px;
}

.monitor-chart3 {
    grid-area: chart3;
    background-color: @colorM;
    border-radius: 8px;
    margin: 10px;
}

.monitor-chart4 {
    grid-area: chart4;
    background-color: @colorM;
    border-radius: 8px;
    margin: 10px;
}

.monitor-list {
    grid-area: list;
    background-color: @colorM;
    border-radius: 8px;
    margin: 10px;
}